<template>
  <div class="game-list-wrap">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="55"
        @load="getData"
      >
        <div class="game-list">
          <div class="game-list-con" v-for="(item, index) in list" :key="index">
            <div class="msg-li-time">{{item.time}}</div>
            <ul>
              <li class="van-hairline--top" v-for="(item, index) in item.dataList" :key="index">
                <div class="clearfix">
                  <div class="fl">
                    <p class="vs-type">{{item.vs_type}}</p>
                    <p class="vs-time">{{item.vs_time}}</p>
                  </div>
                  <div class="fr">
                    <div class="vs-team">
                      <span>{{item.home_team}}</span>
                      <span class="vs-pk">VS</span>
                      <span>{{item.visiting_team}}</span>
                    </div>
                    <div class="vs-info">
                      <div class="vs-tips">
                        <p>让</p>
                        <p>分</p>
                      </div>
                      <table>
                        <tr>
                          <td>0</td>
                          <td>主胜{{item.victory}}</td>
                          <td>平{{item.ping}}</td>
                          <td>主负{{item.fail}}</td>
                        </tr>
                        <tr>
                          <td>{{item.let_ball}}</td>
                          <td>主胜{{item.victory_code}}</td>
                          <td>平{{item.ping_code}}</td>
                          <td>主负{{item.fail_code}}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { PullRefresh, List, Cell } from 'vant'
import { GET } from '../../api/common'
export default {
  name: "gameList",
  props: ['curIndex'],
  components: {
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,  
    [Cell.name]: Cell,
  },
  data() {
    return {
      list: [],
      listLen: 0,
      refreshing: false,
      loading: false,
      finished: false,
      totalAmount: 0,
      totalPages: 0,
      pageIndex: 0,
      pageSize: 5,
      checkTime: '',
      isNone: false
    };
  },
  created() {
  },
  methods: {
    getData(isRefresh) {
      if (isRefresh) {
        this.pageIndex = 0
        this.listLen = 0
        this.checkTime = ''
        this.isNone = false
      }

      if (this.isNone) {
        return
      }
      this.pageIndex ++

      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }
      GET('cms/match', params).then((res) => {
        this.totalAmount = res.data.totalAmount
        // this.totalPages = (this.totalAmount + this.pageSize - 1) / this.pageSize

        if (isRefresh) {
          this.list = []
          this.finished = false
          this.refreshing = false
          window.scrollTo(0, 0)
        }
        let arr = []
        res.data.records.forEach((item, index) => {
          arr.push(item)
        })
        this.listLen += arr.length
        this.formatList(arr)
        this.loading = false
        
        if (this.listLen >= this.totalAmount) {
          this.isNone = true
          this.finished = true
        }
      })
    },
    onRefresh() {
      this.getData(true)
    },
    formatList(list) {
      list.forEach((item, index) => {
        if (this.checkTime == item.vs_time) {
          this.list[this.list.length - 1].dataList.push(item)
        }
        else {
          let obj = {
            time: '0',
            dataList: []
          }
          this.checkTime = item.vs_time
          obj.time = this.checkTime
          obj.dataList.push(item)
          this.list.push(obj)
        } 
      })
    }
  }
};
</script>

<style scoped lang="less">
  .game-list-wrap {
    .game-list {
      background-color: #fff;
      .game-list-con {
        .msg-li-time {
          text-align: center;
          padding: 3px 0;
          background-color: #dfefff;
          color: #0075ea;
        }
        > ul {
          > li {
            font-size: 12px;
            padding: 20px 15px;
            .fl {
              width: 18%;
              color: #999;
              padding-top: 28px;
              text-align: center;
              .vs-type {
                font-size: 18px;
                margin-bottom: 3px;
              }
              .vs-time {
                line-height: 16px;
              }
            }
            .fr {
              width: 79%;
              text-align: center;
              font-size: 14px;
              .vs-team {
                font-size: 18px;  
                color: #333;
                .vs-pk {
                  color: #999;
                  margin: auto 5px;
                }
              }
              .vs-info {
                margin-top: 5px;
                position: relative;
                .vs-tips {
                  position: absolute;
                  left: 3%;
                  top: -30px;
                  font-size: 10px;
                  color: #ffa700;
                }
                table {
                  width: 100%;
                  border-collapse: collapse;
                  border: none;
                  tr {
                    td {
                      border: 1px solid #bddeff;
                      color: #999;
                      height: 30px;
                      &:first-child {
                        width: 8%;
                        font-size: 12px;
                      }
                    }
                    &:nth-of-type(2) td:first-child {
                      background-color: #d4ffd4;
                    }
                  }
                }
              }
            }
          }
        }
      } 
    }
  }
</style>
